import { useEffect } from 'react';
import { IknowledgeDetailChild } from '@/types/index';
import Popup from '@/components/Popup/index';
import {
  KnowledgeModelState,
  IRouteComponentProps,
  useDispatch,
  useSelector,
  Link,
} from 'umi';
import styles from './knowledgeDetail.less'; // 启用css module
import { formatDate } from '../../../utils/index';
// const history = useHistory();
function renderTime(date: any) {
  var dateee = new Date(date).toJSON();
  return new Date(+new Date(dateee) + 8 * 3600 * 1000)
    .toISOString()
    .replace(/T/g, ' ')
    .replace(/\.[\d]{3}Z/, '');
}
const KnowledgeDetail: React.FC<IRouteComponentProps<{ id: string }>> = ({
  match,
}) => {
  const id = match.params.id;
  // 通过useSelector获取model数据
  const { knowledgeDetail, knowledgeList } = useSelector(
    (state: { knowledge: KnowledgeModelState }) => state.knowledge,
  );

  const kid = localStorage.getItem('kid');




  // 通过useDispatch获取dispatch
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch({
      type: 'knowledge/getKnowledgeDetail',
      payload: id,
    });
  }, [id]);
  useEffect(() => {
    dispatch({
      type: 'knowledge/getKnowledgeList',
    });
  }, []);
  return (
    <main className={styles.content}>
      <div className="contents">
        <div
          className={styles.backgroundimg}
          style={{
            backgroundImage: `linear-gradient(to bottom, rgba(var(--rgb-bg-second), 0), rgba(var(--rgb-bg-second), 1)), url(${knowledgeDetail.cover})`,
          }}
        ></div>
        <div className={styles.container}>
          <div className={styles.containers}>
            <div className={styles.breadcrumb}>
              <span>
                <span className={styles.breadcrumbLink}>
                  <a href="/knowledge">知识小册</a>
                </span>
                <span style={{ margin: '0 8px' }}>/</span>
              </span>
              <span>{knowledgeDetail.title}</span>
            </div>
          </div>
        </div>
        <div className={styles.bottom}>
          <div className={styles.container}>
            <div className={styles.dimidiate}>
              <div className={styles.left}>
                <div className={styles.leftcontent}>
                  <div className={styles.leftcontents}>
                    <header>{knowledgeDetail.title}</header>
                    <main className={styles.imgs}>
                      <div className={styles.contentimg}>
                        <div className={styles.img}>
                          <img src={knowledgeDetail.cover} alt="" />
                        </div>
                        <div className={styles.bottomcon}>
                          <div>
                            <p>{knowledgeDetail.title}</p>
                            <p>{knowledgeDetail.summary}</p>
                            <p>
                              <span>{knowledgeDetail.views}次阅读</span>
                              <span>·</span>
                              <span>
                                <span>
                                  {renderTime(knowledgeDetail.updateAt)}
                                </span>
                              </span>
                            </p>
                            <div>
                              <span>
                                <button className={styles.btn}>
                                  {knowledgeDetail.children &&
                                  knowledgeDetail.children.length > 0 ? (
                                    knowledgeDetail.children.map((item) => {
                                      return (
                                        <Link key={item.id}
                                          to={`/knowledge/${knowledgeDetail.id}/${item.id}`}
                                        >
                                          开始阅读
                                        </Link>
                                      );
                                    })
                                  ) : (
                                    <div >敬请期待</div>
                                  )}
                                </button>
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <ul className={styles.uls}>
                        {knowledgeDetail.children &&
                        knowledgeDetail.children.length > 0 ? (
                          knowledgeDetail.children.map((item) => {
                            return (
                              <li key={item.id}>
                                <Link
                                  className={styles.Detailtime}
                                  to={`/knowledge/${knowledgeDetail.id}/${item.id}`}
                                >
                                  <span>{item.title}</span>
                                  <span>
                                    <span>{renderTime(item.updateAt)}</span>
                                    <span>
                                      <svg
                                        viewBox="64 64 896 896"
                                        focusable="false"
                                        data-icon="right"
                                        width="1em"
                                        height="1em"
                                        fill="currentColor"
                                        aria-hidden="true"
                                      >
                                        <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
                                      </svg>
                                    </span>
                                  </span>
                                </Link>
                              </li>
                            );
                          })
                        ) : (
                          <div className={styles.data}>暂无数据</div>
                        )}
                      </ul>
                    </main>
                  </div>
                </div>
              </div>
              <div className={styles.right}>
                <div className={styles.sticky}>
                  <header>其他知识笔记</header>
                  <main>
                    <div className={styles.rightcontent}>
                      {knowledgeList && knowledgeList.length > 1 ? (
                        knowledgeList.map((item) => {
                          if (item.id != id) {
                            return (
                              <div key={item.id} className={styles.topitems}>
                                <div style={{ opacity: 1 }}>
                                  <Link to={`/knowledge/${item.id}`}>
                                    <header className={styles.titles}>
                                      <div>{item.title}</div>
                                      <div>
                                        <div className={styles.divider}></div>
                                        <span
                                          style={{
                                            color: '#8590a6',
                                            fontSize: '16px',
                                            fontWeight: '400',
                                          }}
                                        >
                                          <time>
                                            {formatDate(item.updateAt)}
                                          </time>
                                        </span>
                                      </div>
                                    </header>
                                  </Link>
                                  <main className={styles.mains}>
                                    <Link to={`/knowledge/${item.id}`}>
                                      <div className={styles.smallimg}>
                                        <img src={item.cover} alt="cover" />
                                      </div>{' '}
                                    </Link>

                                    <div className={styles.smallright}>
                                      <div className={styles.summary}>
                                        {item.summary}
                                      </div>
                                      <div className={styles.share}>
                                        <span
                                          role="img"
                                          aria-label="eye"
                                          className={styles.anticon}
                                        >
                                          <svg
                                            viewBox="64 64 896 896"
                                            focusable="false"
                                            data-icon="eye"
                                            width="1em"
                                            height="1em"
                                            fill="currentColor"
                                            aria-hidden="true"
                                          >
                                            <path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path>
                                          </svg>
                                          <span className={styles.watch}>
                                            {item.views}
                                          </span>
                                        </span>
                                        <span className={styles.point}>·</span>
                                        <span>
                                          <span>
                                            <span
                                              role="img"
                                              aria-label="share-alt"
                                              className={styles.anticon}
                                            >
                                              <svg
                                                viewBox="64 64 896 896"
                                                focusable="false"
                                                data-icon="share-alt"
                                                width="1em"
                                                height="1em"
                                                fill="currentColor"
                                                aria-hidden="true"
                                              >
                                                <path d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 000-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"></path>
                                              </svg>
                                            </span>
                                            <Popup ProputItem={item}></Popup>
                                          </span>
                                        </span>
                                      </div>
                                    </div>
                                  </main>
                                </div>
                              </div>
                            );
                          }
                        })
                      ) : (
                        <div>暂无数据</div>
                      )}
                    </div>
                  </main>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
};

export default KnowledgeDetail;
